import React, {useState} from 'react'
import { Button, Drawer, Space} from 'antd';
import style from '../Questions.module.scss'
import type { QuestionListItem, sortItem } from '@/service/type'
import { usePDF } from 'react-to-pdf';

// 扩展 usePDF 的配置类型，添加 options 属性
type UsePDFOptions = {
  filename: string;
  options?: {
    margin: number;
    orientation: 'portrait' | 'landscape';
    unit: string;
    format: 'a4' | 'letter' | 'legal' | 'tabloid' | 'ledger';
  };
};
interface Props {
  open: boolean
  setOpen: (open: boolean) => void
  titInfo: QuestionListItem
  questionsSort: sortItem[]
}

export const DrawerBox: React.FC<Props> = ({
  open, 
  setOpen, 
  titInfo,
  questionsSort
    }) => {
  
  const onClose = () => {
    setOpen(false);
  };
  const res = questionsSort?.find(it => it.value.toString() === titInfo?.type)
  const optionArr = ['A', 'B', 'C', 'D']

  // 设置边距，单位为像素
  const margin = 20; 
  const { toPDF, targetRef } = usePDF({
    filename: '试卷预览.pdf',
    options: {
      margin: margin,
      orientation: 'portrait',
      unit: 'px',
      format: 'a4'
    }
  } as UsePDFOptions);
  
  return (
      <Drawer
        className={style.drawerBox}
        title="试卷预览"
        onClose={onClose}
        open={open}
        width={700}
        extra={
          <Space>
            <Button onClick={() => {
              onClose()
              toPDF()
            }} type="primary">导出PDF</Button>
            <Button onClick={onClose} type="default">OK</Button>
          </Space>
        }>
           <div ref={targetRef}>
            <h3>试题分类：{res && res.name}</h3>
            {titInfo &&
              <>
                <h3>问题：{titInfo.question}</h3>
                <h3>试题类型：{titInfo.classify}</h3>
                <h3>试题答案：{titInfo.answer}</h3>
                <h3>试题选项：{titInfo.options.map((it, i) => <span key={it} className={style.singleOption}>{optionArr[i]}、{it}</span>)}</h3>
              </>
          }
          </div>
          </Drawer>
    
  )
}


